.archive-list .toggle{cursor:pointer;padding:0 2px 0 0;font-family:Arial,Sans-Serif}
.archive-list ul{margin:0;padding:0}
.archive-list ul li{list-style-position:outside;padding:.45em .7em .25em .5em;margin:.45em 0}
.archive-list ul ul li{padding-left:1.5em}
.archive-list .posts li{padding-left:1.5em}
.archive-list .collapsed ul{display:none}
.archive-list li .post-count:before{content:" ("}
.archive-list li .post-count:after{content:")"}

.header{text-align:right;padding:20px 0 30px;background-color:#333;color:#666}
.header h1{margin:0 30px}
.header h1 a{color:inherit;text-decoration:none}
.header p{font-size:115%;margin:0 30px}
.inner-wrapper{position:relative}
.date-outer{overflow:hidden}
.content{overflow:hidden;background-color:#999;position:relative}
.main{margin:0 20%}
.blog-archive{width:16%;padding:0 2%;position:absolute;top:0;right:0;bottom:0;font-size:78%;color:#666;background-color:#333;border-left:4px solid #444;box-shadow:inset 0 0 5px rgba(0,0,0,.4);overflow:hidden}
.blog-archive .widget{overflow:auto;height:440px;margin-right:-300px;padding-right:300px}
.blog-archive h2{font-size:148%;text-transform:uppercase}
.blog-archive a{color:#999}
.blog-archive a:hover{color:white}
.nav{width:20%;height:auto;top:0;bottom:0;left:0;border:1px solid #3c3c3c;box-shadow:0 0 5px rgba(0,0,0,.7);z-index:3}
.nav ul{height:auto;margin-top:60px}
.nav ul li{float:none;display:block}
.nav ul li ul{left:60%;top:0;border:1px solid #3c3c3c}
.sub-header{font:italic normal 14px/1.4 Georgia,Serif;display:block;line-height:normal;padding:10px 15px;background-color:#333;position:relative;z-index:7;box-shadow:0 0 7px black;border-bottom:2px solid #3c3c3c}
.post-outer{background-color:white}
.post{padding:5% 5%;margin:0 0;position:relative}
.post-snippet{margin:0 10% 0 0}
.cm-num{position:absolute;top:16px;right:22px;font-size:80%;color:#999;width:30px;height:30px;line-height:30px;text-align:center;border-radius:19px;background-color:#333;border:4px solid #444}
.post .post-title{margin:0 0 15px;padding:0 30px 0 0;font-size:130%;text-align:left}
.post-thumbnail{display:block;width:72px;height:72px;max-width:none;float:left;margin:0 1em 0 0;border:1px solid #dcdcdc;background-color:#eee;padding:4px}
.search-form{position:absolute;top:0;right:0;left:0;z-index:5;width:20%;border-bottom:1px solid #3c3c3c}
.search-form .search-field{display:block;background-color:white;font:normal normal 11px/1 Verdana,Tahoma,Arial,Sans-Serif;padding:5px 5px;border:1px solid #3c3c3c;margin:12px auto 12px auto;width:85.3%;box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.search-form .search-field.blur{color:#A9A9A9}
.search-form .search-field.blur:focus{color:inherit}
.date-header{position:static;clear:both;padding:0 15px;background-color:#444}
.search-result{background-color:#333;color:#999;border:1px solid #3c3c3c;font-size:86%;padding:15px 15px;width:200px;max-height:700px;overflow:auto;box-shadow:0 1px 3px rgba(0,0,0,.4);position:absolute;top:15px;left:100%;display:none}
.search-result ul{color:#444}
.search-result li{margin:0 5px 0 15px;padding:0 0}

@media (max-width:1024px){
	.search-form input{width:84%}
	.nav ul li ul{left:100%}
}

@media (max-width:800px){
	.header{padding:55px 0 30px;text-align:left}
	.header h1{font-size:200%}
	.sub-header{box-shadow:0 0 2px black}
	.sub-header+.inner-wrapper .blog-posts{margin:32px 0 0}
	.nav{top:0;right:0;bottom:auto;left:0;width:auto;height:auto}
	.nav ul{margin-top:0;margin-left:22%}
	.nav ul li{float:left;display:inline}
	.nav ul li ul{top:100%;left:0}
	.nav ul li ul li{display:block;float:none}
	.search-form{right:auto;top:6px;left:1%;width:16%;border:none;padding:0 0}
	.search-form .search-field{width:100%;margin:-1px 0 0;padding:3px 4px 4px}
	.main{width:auto;float:none;margin-left:0;margin-right:0}
	.blog-archive{position:static;width:auto;border-top:1px solid #3c3c3c;border-left:none;box-shadow:none;padding:0 3.4% 4%}
	.blog-archive .widget{height:auto;margin-right:0;padding-right:0}
}

@media (max-width:560px){
	.nav ul{margin:0 0}
	.search-form{left:auto;right:0;width:auto}
	.search-form .search-field{left:auto;right:0;width:84%}
	.search-result{right:3px;left:auto;top:30px}
}

@media (max-width:500px){
	.header{height:80px}
	.sub-header{margin:32px auto 50px}
	.nav{position:fixed;z-index:99}
	.search-form{top:102px;right:0;left:0;padding:10px 0;background-color:#333}
	.search-form .search-field{margin:10px auto 0;padding:5px 6px 6px;display:block;width:90%}
	.sub-header+.inner-wrapper .search-form{top:-58px;padding-bottom:12px}
	.sub-header+.inner-wrapper .blog-posts{margin:0 0}
}

@media (max-width:360px){
	.header{margin-top:25px}
	.sub-header{margin:62px auto 50px}
	.nav{border:none}
	.nav ul{height:auto}
	.nav ul li{width:50%}
	.nav ul li ul{width:100%;border-bottom:none}
	.nav ul li a{border:1px solid #3c3c3c;border-width:0 1px 1px 0}
	.nav ul li ul li{width:auto}
	.nav ul li ul li a{border-right:none}
	.footer,.footer .left,.footer .right{float:none;display:block;text-align:center}
}